<template>
  <el-card class="monitor-task-config">
    <tag-content-header>
      <template #title>
        <span class="title-text">执行时间配置</span>
      </template>
    </tag-content-header>
    <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
      <el-form-item label="周期" prop="execFrequency">
        <el-radio-group v-model="editForm.execFrequency" :disabled="!editable">
          <el-radio v-for="item in $dictList('$exec_frequency')" :key="item.key" :label="item.key">
            {{ item.value }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="editForm.execFrequency">
        <el-form-item label="执行日期" prop="execDtList" v-if="editForm.execFrequency === 2" class="rate-form">
          <el-checkbox-group v-model="editForm.execDtList" :disabled="!editable">
            <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
            <el-checkbox :label="999">月末</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="执行星期" prop="execWkList" v-if="editForm.execFrequency === 3" class="rate-form">
          <el-checkbox-group v-model="editForm.execWkList" :disabled="!editable">
            <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="执行时间" prop="execTm">
          <el-col :span="12">
            <el-time-picker
              v-model="editForm.execTm"
              size="mini"
              placeholder="执行时间"
              value-format="HH:mm:ss"
              :disabled="!editable"
            ></el-time-picker>
          </el-col>
        </el-form-item>
      </template>
    </el-form>
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="primary" v-show="!editable" @click="editable = true">编辑</el-button>
        <el-button v-show="editable" @click="cancelEdit">取消</el-button>
        <el-button type="primary" v-show="editable" @click="submit">保存</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      editable: false,
      oldConfig: {},
      editForm: {
        execFrequency: '',
        execDtList: [],
        execWkList: [],
        execTm: ''
      },
      editFormRules: {
        execFrequency: [{ required: true, message: '周期不能为空', trigger: 'change' }],
        execDtList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execWkList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execTm: [{ required: true, message: '执行时间不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '日'
          break
        case 2:
          str = '一'
          break
        case 3:
          str = '二'
          break
        case 4:
          str = '三'
          break
        case 5:
          str = '四'
          break
        case 6:
          str = '五'
          break
        case 7:
          str = '六'
          break
      }
      return str
    },
    getConfig() {
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagWarningConfig/getTagWarningTimeConfig'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.oldConfig = JSON.parse(data.data.warningConfig)
          this.init()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    init() {
      this.editForm.execFrequency = Number(this.oldConfig.update_frequency)
      this.editForm.execDtList = JSON.parse(this.oldConfig.exec_dt_list)
      this.editForm.execWkList = JSON.parse(this.oldConfig.exec_wk_list)
      this.editForm.execTm = this.oldConfig.exec_tm || ''
    },
    submit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const warningConfig = {
            update_frequency: this.editForm.execFrequency,
            exec_dt_list: JSON.stringify(this.editForm.execDtList),
            exec_wk_list: JSON.stringify(this.editForm.execWkList),
            exec_tm: this.editForm.execTm
          }
          this.$ajax({
            url: this.$ajax.setUrl('tag/tagWarningConfig/updateTagWarningTimeConfig'),
            method: 'post',
            data: this.$ajax.setData({
              warningConfig: JSON.stringify(warningConfig)
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.oldConfig = Object.assign({}, this.oldConfig, warningConfig)
              this.editable = false
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    cancelEdit() {
      this.editable = false
      this.init()
    }
  }
}
</script>

<style lang="scss">
.monitor-task-config {
  .tag-content-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .el-radio__input.is-disabled + span.el-radio__label,
  .el-input.is-disabled .el-input__inner,
  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #606266;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner,
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #4e5aa3;
    border-color: #4e5aa3;
  }
}
</style>
